<template>
  <master title="作业">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.title" placeholder="按标题查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="danger" icon="el-icon-plus" @click="edit()">增加</el-button>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="rows" stripe style="width: 100%">
        <!-- <el-table-column prop="photo" label="头图">
          <template slot-scope="scope">
            <img v-if="scope.row.img" class="photo" :src="APIURL + scope.row.img" />
            <img v-else class="photo" src="@/assets/photo.png" />
          </template>
        </el-table-column>-->
        <el-table-column prop="name" label="作业名称">
        </el-table-column>
        <el-table-column prop="createTimeString" label="发布时间">
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toInfo(scope.row)">详细信息</el-button>
            <el-button type="primary" size="mini" @click="toAnwser(scope.row)">去答题</el-button>

            <el-button type="primary" size="mini" @click="toAnwserInfo(scope.row)">答题记录</el-button>
            <el-button type="primary" size="mini" @click="getResult(scope.row.id)">总结</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-pagination">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="editForm.id ? '编辑新闻' : '新增新闻'" :visible.sync="visible">
      <el-form ref="editForm" :model="editForm">
        <el-form-item label="标题">
          <el-input v-model="editForm.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="visible = false">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        loading: false,
        params: {
          pageSize: 10,
          pageNum: 1,
          title: ""
        },
        total: 0,
        rows: [],
        visible: false,
        editForm: {},
        enterprise: []
      },
      methods: {
        edit(row) {
          const targetURL = 'http://localhost:3001/#/pages/practice/index';
          window.location.href = targetURL;
        },
        toInfo(row) {
          G.$go('/pages/practice/info1?practiceId=' + row.id)
        },

        toAnwser(row) {
          G.$go('/pages/practice/info?practiceId=' + row.id)
        },
        toAnwserInfo(row) {
          /* const targetURL = 'http://localhost:3001/#/pages/practice/info?practiceId='+row.id;
           window.location.href = targetURL;*/
          G.$go('/pages/answerRecord/list?practiceId=' + row.id)
          //G.$go('/pages/answerRecord/info?practiceId='+row.id)

        },


        save() {
          this.$refs.editForm.validate((valid) => {
            if (valid) {
              if (this.editForm.id) {
                G.put('/api/model/article', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('编辑新闻成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              } else {
                G.post('/api/model/article', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('添加新闻成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              }
            }
          })
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          this.params.pageNum = 1;
          this.getList();
        },
        getList() {
          this.loading = true;

          G.post('{JAVAURL}/sp-practice/page', this.params).then((res) => {
            console.log("res", res);
            this.loading = false;
            this.total = res.data.total;
            this.rows = res.data.rows;
          });

        },
        //___________________________刘航定义_______________________________________________
        getResult(practiceId) {
          console.log("practiceId", practiceId);
          // 构造请求
          fetch('http://localhost:8080/sp-course/createWordPractice', {
            method: 'POST', // 使用 POST 请求
            headers: {
              'Content-Type': 'application/json', // 指定发送 JSON 格式
            },
            body: practiceId, // 将对象转为 JSON 字符串
          })
            .then(response => {
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
              }
              return response.blob(); // 获取文件数据
            })
            .then(blob => {
              // 创建 Blob 对象的 URL
              const url = window.URL.createObjectURL(blob);
              // 创建一个 <a> 元素用于下载
              const a = document.createElement('a');
              a.href = url;
              // 设置文件名（可以根据后端返回的文件名动态设置）
              a.download = '课程数据.docx'; // 自定义文件名
              document.body.appendChild(a);
              // 触发下载
              a.click();
              // 移除临时的 <a> 元素
              document.body.removeChild(a);
              // 释放 Blob URL
              window.URL.revokeObjectURL(url);
              console.log('文件下载成功');
            })
            .catch(error => {
              console.error('发送失败:', error);
            });
        }
        //___________________________刘航定义_______________________________________________

      },
      mounted() {
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>

</style>